<template>
  <div class="bankFormContainer">
    <Drawer
      :title="formData.title"
      :value="formData.showForm"
      width="850"
      @on-close="handleCancel"
      :mask-closable="false"
    >
      <Form :model="form" :label-width="120" :rules="rules" ref="form">
        <Row>
          <Col span="12">
            <FormItem label="试题分类：" prop="question_type">
              <Select v-model="form.question_type" :disabled="readonly">
                <Option :value="item.code" v-for="item in eprList" :key="item.code">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="培训类型：" prop="train_type">
              <Select v-model="form.train_type" :disabled="readonly">
                <Option :value="item.code" v-for="item in eprList" :key="item.code">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <FormItem label="题目：" prop="question">
            <div class="questionBox">
              <div :id="questionId"></div>
            </div>
          </FormItem>
        </Row>
        <Row>
          <FormItem label="选项：" prop="options">
            <div class="optionsBox">
              <div v-for="(item,index) in options" :key="index" class="optionsItem mb10 frow">
                <div class="fcol w100">
                  <div class="frow optionLabel faic">
                    <div class="mr20">{{item.id}}</div>
                    <Checkbox v-model="item.isCorrect" class="mr20">正确答案</Checkbox>
                    <div @click="delOptions(item,index)" class="cp thirdBtn">删除选项</div>
                  </div>
                  <div :id="item.id" class="optionBox"></div>
                </div>
              </div>
            </div>
          </FormItem>
        </Row>
      </Form>
      <div class="frow fjcc">
        <Button type="default" @click="handleCancel" class="mr20">{{formData.type=='2'?'关闭':'取消'}}</Button>
        <Button type="primary" @click="handleSubmit"  class="mr20" v-if="!readonly">保存并继续添加</Button>
        <Button type="primary" @click="handleSubmit" v-if="!readonly">保存并关闭</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import Editor from 'wangeditor'
import 'wangeditor/release/wangEditor.min.css'
export default {
  name: 'bankFormContainer',
  props: {
    formData: Object
  },
  data () {
    return {
      eprList: [],
      form: {},
      rules: {},
      questionId: 'question',
      options: [{ id: 'A' }, { id: 'B' }, { id: 'C' }, { id: 'D' }],
      editorList: [],
      question: null
    }
  },
  watch: {
    formData: {
      handler (newValue) {
        console.log(newValue)
      },
      deep: true
    }
  },
  computed: {
    readonly () {
      return this.formData.type == '2'
    }
  },
  mounted () {
    this.question = new Editor(`#${this.questionId}`)
    this.question.customConfig.onchange = html => {
      console.log(html)
    }
    this.question.customConfig.onchangeTimeout = this.changeInterval
    // create这个方法一定要在所有配置项之后调用
    this.question.create()
    this.options.map((n, i) => {
      this.editorList[i] = new Editor(`#${n.id}`)
      this.editorList[i].customConfig.onchange = html => {
        console.log(html, n, i)

        // const text = this.editorList[i].txt.text()
        // if (this.cache) localStorage.editorCache = html
        // this.$emit('input', this.valueType === 'html' ? html : text)
        // this.$emit('on-change', html, text)
      }
      this.editorList[i].customConfig.onchangeTimeout = this.changeInterval
      // create这个方法一定要在所有配置项之后调用
      this.editorList[i].create()
    })
  },
  methods: {
    // 取消
    handleCancel () {
      this.$refs.form.resetFields()
      this.$emit('handleCancel')
    },
    // 确定
    handleSubmit () {},
    delOptions (item, index) {
      this.options.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
.bankFormContainer {
  .questionBox {
    height: 100px;
  }
  .optionsBox {
    overflow: auto;
    height: 650px;
    .optionsItem {
      .optionLabel {
        height: 30px;
      }
      .optionBox {
        height: 100px;
      }
    }
  }
}
</style>
